<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=yes"/>
    <title>动感地带电竞包</title>
    <link rel="stylesheet" href="./css/vant.css">
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/vant.min.js"></script>
    <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="app">
    <div class="page">
        <div class="header">
            <img src="images/img1.png" alt="" class="header-img">
        </div>
        <div class="body">
            <img src="images/img2.png" alt="" class="body-img">

            <div class="form">
                <div class="desc-box">
                    <!--<img src="images/img3.png" alt="" class="desc-img">-->
					<img src="images/img3.png" alt="" class="desc-img" @click="handlePhone">
                </div>

                <div class="input-group">
                    <label>
                        <input  v-model="tempForm.mobile"  type="number" maxlength="11" class="mobile-input"
                        placeholder="请输入移动手机号码"
                        >
                    </label>
                </div>
                <div class="input-group2">


                    <label>
                        <input v-model="tempForm.code" type="number" maxlength="6" class="code-input"
                        placeholder="请输入短信验证码"
                        >
                    </label>

                    <div @click="check" class="code-btn">{{timeVisible?num:"获取验证码"}}</div>


                </div>
                <div class="radio-box">
                    <van-checkbox v-model="radio" check-color="#e9decf" icon-size="14px">我已阅读并同意《业务受理协议》</van-checkbox>
                </div>
                <div class="submit-box">
                    <img @click="submit" class="submit-btn" src="./images/btn.png" alt="">

                </div>


            </div>

        </div>




        <div class="footer">

            <div class="footer-img-box">
                <img src="images/img4.png" alt="" class="footer-img2">
            </div>
            <div class="footer-img-box">
                <img src="images/img5.png" alt="" class="footer-img">
            </div>
            <div class="footer-img-box">
                <img src="images/cm.png" alt="" class="footer-img">
            </div>
        </div>
    </div>
    <div v-show="step===3" class="dialog">
            <img src="images/two.png" alt="" class="dialog-img">
            <div class="form2" >
                <div class="desc-box">
                    <img src="images/img32.png" alt="" class="desc-img">
                </div>
                <div class="mobile-box">
                    <div class="mobileTwo">
                        手机号：{{mobileTwo}}
                    </div>
                    <div class="border"></div>
                </div>
                <div class="submit-box">
                    <img @click="accept" class="submit-btn" src="./images/btn2.png" alt="">
                </div>
                <div class="close-box">
                    <img  @click="handleClose" src="images/close.png" alt="" class="close-img">
                </div>
                <div class="phone-box">
                    <img @click="handlePhone" src="images/phone.png" alt="" class="phone-img">
                </div>
            </div>
            <img src="images/close2.png" @click="handleClose" alt="" class="dialog-img2">

    </div>
    <div v-show="step===4" class="dialog">
        <img src="images/success.png" alt="" class="success-img" >
        <div class="success-phone">
            <img @click="handlePhone" src="images/phone.png" alt="" class="success-phone-img">
        </div>
        <div class="success-btn">
            <img @click="handleClose" src="images/btn3.png" alt="" class="success-btn">
        </div>
        <img src="images/close2.png" @click="handleClose" alt="" class="success-close">
    </div>
    <div v-show="step===5" class="dialog">
        <img src="images/fail.png" alt="" class="success-img" >
        <div class="fail-phone">
            <img @click="handlePhone" src="images/phone.png" alt="" class="fail-phone-img"  >
        </div>
        <div class="fail-btn">
            <img @click="handleClose" src="images/btn3.png" alt="" class="fail-btn">
        </div>
        <img src="images/close2.png" @click="handleClose" alt="" class="success-close">
    </div>
</div>
</body>
<script type="text/javascript" src="./js/index.js">

</script>

</html>
